<template>
  <div class="footer">
    <ul>
      <li v-for="(item,index) in bnts" :key="index"  :type=" item.active ? 'true' :'' " @click="switchPage(item,index)">
        <span></span>
        <span>{{item.text}}</span>
      </li>
      <!--<li >-->
        <!--<span></span>-->
        <!--<span>市场主体</span>-->
      <!--</li>-->
      <!--<li>-->
        <!--<span></span>-->
        <!--<span>资金流动</span>-->
      <!--</li>-->
      <!--<li >-->
        <!--<span></span>-->
        <!--<span>我要投资</span>-->
      <!--</li>-->
    </ul>
  </div>
</template>
<style>
.footer{
  width:100%;
  height:1rem;
  background:#0f2c3d;
}
.footer ul{
  height:100%;
  list-style: none;
  display:flex;
  display:-webkit-flex;
  color:#899dac;
  font-size:0.2rem;
  justify-content: space-around;
  align-items: center;
}
.footer ul li{
   height:75%;

   display:flex;
  flex-flow: column;
  align-items: center;
}
.footer ul li span:first-child{
  width:0.52rem;
  height:0.6rem;
  /*background:yellow;*/
  background-size:contain !important;
  margin-bottom:0.05rem;
}
.footer ul li:nth-child(1) span:first-child  {
  background:url('../../static/zhengWu/icon_01.png')no-repeat center;

}
.footer ul li:nth-child(2) span:first-child  {
  background:url('../../static/zhengWu/icon_02.png')no-repeat center;
}
.footer ul li:nth-child(3) span:first-child  {
  background:url('../../static/zhengWu/icon_03.png')no-repeat center;

}
.footer ul li:nth-child(4) span:first-child  {
  background:url('../../static/zhengWu/icon_04.png')no-repeat center;
}
.footer ul li:nth-child(1)[type='true'] span:first-child  {
  background:url('../../static/zhengWu/act_icon_01.png')no-repeat center !important;
  background-size:contain !important;
}
.footer ul li:nth-child(2)[type='true'] span:first-child  {
  background:url('../../static/zhengWu/act_icon_02.png')no-repeat center !important;
  background-size:contain !important;
  width: 0.63rem;
  height: 0.6rem;
}
.footer ul li:nth-child(3)[type='true'] span:first-child  {
  background:url('../../static/zhengWu/act_icon_03.png')no-repeat center !important;
  background-size:contain !important;
}
.footer ul li:nth-child(4)[type='true'] span:first-child  {
  background:url('../../static/zhengWu/act_icon_04.png')no-repeat center !important;
  background-size:contain !important;
}
.footer ul li[type='true'] span + span{
  color:#ee3333;
}
</style>
<script>
 export default{
    data(){
      return {
          bnts:[
            {text: '业务新闻',active:true},
            {text: '主体市场',active:false},
            {text: '资金流动',active:false},
            {text: '我要报资',active:false}
          ],
        index:0
      }
    },
   methods:{
      switchPage(item,index){
         this.index = index;
        switch(index){
          case 0 :
            this.$router.push({path:'/',query: { plan: index }});
            break
          case 1 :
            this.$router.push({path:'/market',query: { plan: index }});
            break
          case 2 :
            this.$router.push({path:'/capital',query: { plan: index }});
            break
          case 3 :
            this.$router.push({path:'/investment',query: { plan: index }});
            break
        }
        for(var i = 0;i< this.bnts.length;i++){
          if(i==index){
            this.bnts[i].active = true;
          }else{
            this.bnts[i].active = false;
          }
        }

      },
     getUrlParams(key) {
       const urlParam = (key) => {
         var reg = new RegExp(key + '=([^&]*)');
         var results = location.href.match(reg);
         return results ? results[1] : null;
       }
      let index = urlParam(key)
       if(index==null){
         this.bnts[0].active = true;
         return
       }
       for(var i = 0;i< this.bnts.length;i++){
         if(i==index){
           this.bnts[i].active = true;
         }else{
           this.bnts[i].active = false;
         }
       }

     }
    },
   mounted(){
     this.getUrlParams('plan')
    },
   watch:{
    // '$route':'this.gethostory'
   }
  }
</script>
